import { useEffect, useState } from "react";
import {
  PlusOutlined,
  UploadOutlined,
  AlignLeftOutlined
} from "@ant-design/icons";
import { Outlet, useNavigate, useLocation } from "react-router-dom";
import { Layout, Menu, Modal } from "antd";
import { useSelector } from 'react-redux';
import "./index.less";

const { Content, Sider } = Layout;

const menuList = [
  {
    key: "0",
    label: "新对话",
    path: "/chat",
    icon: <PlusOutlined />,
  },
  {
    key: "1",
    label: "上传知识",
    path: "/upload",
    icon: <UploadOutlined />,
  },
  {
    key: "2",
    label: "知识管理",
    path: "/repository",
    icon: <AlignLeftOutlined />,
  }
];

function Admin() {
  const navigate = useNavigate();
  const location = useLocation();

  const [menuKey, setMenuKey] = useState(null);

  // const chatHistoryList = useSelector(state => state.chatList)

  useEffect(() => {
    setMenuKey(menuList[0].key);
    navigate(menuList[0].path);
  }, []);

  useEffect(() => {
    for (let menuItem of menuList) {
      if (
        menuItem.path == undefined ||
        menuItem.path == null ||
        menuItem.path == ""
      ) {
        for (let childItem of menuItem.children) {
          if (location.pathname == childItem.path) {
            setMenuKey(childItem.key);
            break;
          }
        }
      } else {
        if (location.pathname == menuItem.path) {
          setMenuKey(menuItem.key);
          break;
        }
      }
    }
  }, [location]);

  const menuChange = ({ item }) => {
    navigate(item.props.path);
  };

  // const renderHistory = () => {
  //   return chatHistoryList.map(item => {

  //   })
  // }


  return (
    <Layout>
      <Sider theme="light">
        <div className="title">Fantastic UI</div>
        <Menu
          theme="light"
          mode="inline"
          selectedKeys={[menuKey]}
          onClick={menuChange}
          items={menuList}
        />
        <div className="sub-title">最近对话</div>
        <div className="chat-history">

        </div>
      </Sider>
      <Layout className="layout-right">
        <Content>
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
}

export default Admin;
